import React, { useState, useEffect, useMemo, memo } from 'react';
import styles from './index.less';
import useModel from '../../useModel.js';
import Toolbar from '@/components/Toolbar';
import { Form } from 'antd';
import useMediaQuery from 'use-media-antd-query';
import classnames from 'classnames';

const ToolbarWrap = () => {
  const windowSize = useMediaQuery();
  const { setState, tableParams } = useModel(model => [model.tableParams]);
  let style = {};
  switch (windowSize) {
    case 'xxl':
      style = { width: `calc(${100 / 4 + '%'} - 10px)` };
      break;
    case 'xl':
    case 'lg':
    case 'md':
      style = { width: `calc(${100 / 3 + '%'} - 10px)` };
      break;
    default:
      style = {};
      break;
  }

  let toolbar = [
    {
      type: 'inputItem',
      id: 'suId',
      name: 'FSUID',
      style: style,
      className: classnames(styles['common']),
    },
    {
      type: 'inputItem',
      id: 'title',
      className: classnames(styles['common']),
      name: '报文名称',
      style: style,
    },
    {
      type: 'selectItem',
      id: 'msgType',
      name: '报文类型',
      style: style,
      className: classnames(styles['common'], styles['device-type-select']),
      children: [
        { name: 'SU->SC', value: 0 },
        { name: 'SC->SU', value: 1 },
        { name: 'xml模板', value: 2 },
        { name: '信号点上报', value: 3 },
      ],
    },
    {
      type: 'selectItem',
      id: 'level',
      name: '失败类型',
      style: style,
      className: classnames(styles['common'], styles['device-type-select']),
      children: [
        { name: '错误xml结构', value: 0 },
        { name: '正确', value: 1 },
        { name: '请求设备超时', value: 2 },
        { name: '格式不匹配', value: 3 },
        { name: '异常', value: 4 },
        { name: '缺少自定义报文', value: 5 },
      ],
    },
    {
      type: 'rangePickerItem',
      id: 'time',
      className: classnames(styles['common'], styles['time']),
      style: style,
      name: '时间',
    },
    {
      type: 'button',
      name: '查询',
      onClick: (e, form) => {
        setState({ tableParams: { ...form.getFieldsValue() } });
      },
    },
  ];

  return <Toolbar modules={toolbar} leftSpan={24} className={styles['toolbar-wrap']} />;
};
export default ToolbarWrap;
